// *{
//   border: solid;
// }

@mixin wh($value) {
  width: $value;
  height: $value*1.618;
}

body
{
  box-sizing: border-box;
  background: linear-gradient(120deg, #487eb0, #fbc531);
  min-height: 100vh;
  main
  {
    max-width: 64rem;
    margin: auto;
    padding: 1rem;

    input
    {
      width: 100%;
      border: none;
      border-bottom: 2px solid black;
      outline: none;
      background: none;
      padding: .4rem;
      font-size: 1.6rem;
    }
    section
    {
      width: 100%;
      h3
      {
        margin: 1rem;
      }
      article
      {
        width: 100%;
        background-color: rgba($color: white, $alpha: 0.5);
        padding: 1rem;
        margin-bottom: .5rem;
        overflow: hidden;
        i
        {
          float: right;
          margin-left: 1rem;
          cursor: pointer;
        }
      }
    }

    #comp
    {
      article
      {
        background-color: rgba($color: black, $alpha: 0.5);
        color: white;
      }
    }
  }
}

